<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				仓单兑换
			</view>
			<view class="right" @click="onRight">
				兑换记录
			</view>
		</view>
		<view class="top">
			<view class="topL" @click="dropDownShow =!dropDownShow">
				<view class="topLText">
					{{bourse.label}}
				</view>
				<uni-icons type="bottom" size="15" color="#333"></uni-icons>
			</view>
			<view class="topC" @click="dropDownShow2 =!dropDownShow2">
				<view class="topLText">
					{{bourse2.label}}
				</view>
				<uni-icons type="bottom" size="15" color="#333"></uni-icons>
			</view>

		</view>
		<view class="topR flex">
			<view class="topRItem">
				收盘价：{{bourse2.price}}
			</view>
			<view class="topRItem">
				代码：{{bourse2.exNo}}
			</view>
		</view>

		<view class="exchange flex-between">
			<view class="exchangeTitle">
				兑换数量
			</view>
			<input class="exchangeIpt" type="text" placeholder="请输入兑换数量" v-model="form.amount">
		</view>

		<view class="exch flex-between">
			<view class="exchItem" v-if="(type == 1 && paywayId != 1) || (type == 2 && paywayId2 == 1)">
				剩余数量：{{bourse2.num}}
			</view>
			<view class="exchItem">
				可兑换：{{exch}}张
			</view>
		</view>

		<view class="payway" v-if="type == 1">
			<view class="paywayTitle">
				支付方式
			</view>

			<view class="paywayList">
				<view class="paywayItem flex-between" v-for="item in paywayList" :key="item.id" @click="onPaywayItem(item)">
					<view class="paywayItemL">
						{{ item.title }}
					</view>
					<view class="paywayItemR">
						<image class="choose" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
						</image>
						<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
						</image>
					</view>
				</view>
			</view>
		</view>
		<button class="btn" v-if="type == 1" @click="onChangeBtn">兑换</button>



		<button class="btn" v-if="type == 2" @click="onChangeBtn2">兑换</button>
		<view class="payway" v-if="type == 2">
			<view class="paywayTitle">
				支付方式
			</view>

			<view class="paywayList">
				<view class="paywayItem flex-between" v-for="item in paywayList2" :key="item.id" @click="onPaywayItem2(item)">
					<view class="paywayItemL">
						{{ item.title }}
					</view>
					<view class="paywayItemR">
						<image class="choose" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
						</image>
						<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
						</image>
					</view>
				</view>
			</view>
		</view>
		<my-popup-tips type="bottom" :showTips="dropDownShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<view class="paywayBox">
				<image class="close" src="http://www.bobei.shop/static/my/payway/close.png" @click="dropDownShow = false">
				</image>
				<view class="paywayTitle2">
					选择交易所
				</view>

				<view class="way2">
					<view class="wayItem2 flex-between" v-for="item in candidates" :key="item.value" @click="onCandidates(item)">
						<view class="wayItemLeft2 flex-row">
							<view class="wayItemLeftCon2">
								<view class="wayItemLeftConText2">
									{{ item.label }}
								</view>
							</view>
						</view>
						<view class="wayItemRight2">
							<image class="choose2" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
							</image>
							<image class="choose2" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
							</image>
						</view>
					</view>
				</view>
				<button class="paySure2" :plain="true" @click="dropDownShow = false">确定</button>
			</view>
		</my-popup-tips>


		<my-popup-tips type="bottom" :showTips="dropDownShow2" @tipsOpen="paywayOpen2" @tipsClose="paywayClose2">
			<view class="paywayBox">
				<image class="close" src="http://www.bobei.shop/static/my/payway/close.png" @click="dropDownShow2 = false">
				</image>
				<view class="paywayTitle2">
					选择票类
				</view>

				<view class="way2">
					<view class="wayItem2 flex-between" v-for="item in candidates2" :key="item.value"
						@click="onCandidates2(item)">
						<view class="wayItemLeft2 flex-row">
							<view class="wayItemLeftCon2">
								<view class="wayItemLeftConText2">
									{{ item.label }}
								</view>

							</view>
						</view>
						<view class="wayItemRight2">
							<image class="choose2" src="http://www.bobei.shop/static/login/choose.png" v-if="!item.status">
							</image>
							<image class="choose2" src="http://www.bobei.shop/static/login/choosed.png" v-if="item.status">
							</image>
						</view>
					</view>
				</view>

				<button class="paySure2" :plain="true" @click="dropDownShow2 = false">确定</button>
			</view>
		</my-popup-tips>

		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>

		<determined-popover :showTips="determinedShow2" @tipsOpen="determineTipsOpen2" @tipsClose="determineTipsClose2"
			@onDeterClose="onDeterClose2" @onPrefect="determineOnPrefect2" :deterTitle="deterTitle2"
			:deterContent="deterContent2"></determined-popover>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	import determinedPopover from "../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				determinedShow2: false,
				deterTitle2: "",
				deterContent2: "",

				statusBarHeight: "",
				type: "",
				dropDownShow: false,
				candidates: [], // 交易所列表
				bourse: {
					value: "",
					label: "",
				}, // 选中的交易所
				dropDownShow2: false,
				candidates2: [], // 票类列表
				bourse2: {
					value: "",
					label: "",
					price: "", // 收盘价
					exNo: "", // 代码
					num: "", // 票剩余数量
					chiNum: "", // 票持有数量
					limitNum: "", // 票限制数量 大于零考虑限制
				}, //选中的票类
				form: {
					amount: "",
				},
				paywayId: 1,
				paywayList: [{
						id: 1,
						title: "贡献值",
						status: true
					},
					{
						id: 2,
						title: "转赠积分",
						status: false
					},
				],

				paywayId2: 1,
				paywayList2: [{
						id: 1,
						title: "普通积分",
						status: true
					},

				],
				info: {},
				credit: "",
				oneClick: false,
			}
		},
		onLoad(option) {
			this.statusBarHeight = this.$mySysInfo().top;
			this.type = option.type;
			if (option.type == 1) {
				uni.setNavigationBarTitle({
					title: "原始仓单兑换"
				})

			} else {
				uni.setNavigationBarTitle({
					title: "持有仓单兑换"
				})
			}
		},
		onShow() {
			this.getParams();
			this.getInfo();
		},
		computed: {
			exch() { // 可兑换 = 贡献值 / (收盘价 * 1.5) 取整  持有仓单不*1.5
				if (this.type == 1) {
					if (this.paywayId == 1) {
						let a = parseInt(Number(this.credit) / (Number(this.bourse2.price) * 1.5));
						return a;
					} else { // 原始仓单 转赠积分不*1.5
						if (this.bourse2.limitNum > 0) {
							let cha = this.bourse2.limitNum - this.bourse2.chiNum; // 最大可兑换数量
							if (cha < 0) {
								let c = 0;
								return c
							} else {
								let qian = parseInt(Number(this.credit) / Number(this.bourse2.price)); // 余额可兑换数量
								if (cha > qian) {
									let c = qian;
									return c;
								} else {
									return cha;
								}
							}

						} else {
							let c = parseInt(Number(this.credit) / Number(this.bourse2.price));
							return c;
						}

					}

				} else {
					if (this.bourse2.limitNum > 0) {
						let cha = this.bourse2.limitNum - this.bourse2.chiNum; // 最大可兑换数量
						if (cha < 0) {
							let c = 0;
							return c
						} else {
							let qian = parseInt(Number(this.credit) / Number(this.bourse2.price)); // 余额可兑换数量
							if (cha > qian) {
								let c = qian;
								return c;
							} else {
								return cha;
							}
						}

					} else {
						let c = parseInt(Number(this.credit) / Number(this.bourse2.price));
						return c;
					}
				}

			}
		},

		methods: {
			onChangeBtn() {
				if (!this.form.amount) {
					uni.showToast({
						title: '请输入兑换数量',
						icon: 'none',
						duration: 1500
					});
					return;
				}
				this.deterTitle = "提示";
				this.deterContent = "确定兑换？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				let that = this;
				if (!that.oneClick) {
					that.oneClick = true;
					that.$post({
						module: 'Exchange',
						interface: 5001,
						data: {
							type: that.paywayId,
							id: String(that.bourse2.value),
							amount: that.form.amount,
						},
					}).then(res => {
						that.determinedShow = false;
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							that.oneClick = false;
							that.goBack();
						}, 1000)
					}).catch(() => {
						this.determinedShow = false;
						setTimeout(() => {
							that.oneClick = false;
						}, 1000)
					})
				}

			},


			onChangeBtn2() {
				if (!this.form.amount) {
					uni.showToast({
						title: '请输入兑换数量',
						icon: 'none',
						duration: 1500
					});
					return;
				}

				this.deterTitle2 = "提示";
				this.deterContent2 = "确定兑换？";
				this.determinedShow2 = true;
			},
			determineTipsOpen2(param) {
				this.determinedShow2 = param;
			},
			determineTipsClose2(param) {
				this.determinedShow2 = param;
			},
			onDeterClose2() {
				this.determinedShow2 = false;
			},
			determineOnPrefect2() {
				let that = this;
				if (!that.oneClick) {
					that.oneClick = true;
					that.$post({
						module: 'Exchange',
						interface: 5002,
						data: {
							id: String(that.bourse2.value),
							amount: that.form.amount,
						},
					}).then(res => {
						that.determinedShow2 = false;
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							that.oneClick = false;
							that.goBack();
						}, 1000)
					}).catch(() => {
						that.determinedShow2 = false;
						setTimeout(() => {
							that.oneClick = false;
						}, 1000)
					})
				}

			},


			onRight() {
				uni.navigateTo({
					url: '/property/cdRecord?type=' + this.type
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			paywayOpen(param) {
				this.dropDownShow = param;
			},
			paywayClose(param) {
				this.dropDownShow = param;
			},
			paywayOpen2(param) {
				this.dropDownShow2 = param;
			},
			paywayClose2(param) {
				this.dropDownShow2 = param;
			},
			onPaywayItem(param) {
				this.paywayList.forEach((item) => {
					item.status = false;
					if (item.id == param.id) {
						item.status = true;
						this.paywayId = item.id;
						if (item.id == 1) {
							this.credit = this.info.credit_2;
						} else if (item.id == 2) {
							this.credit = this.info.credit_7_ke;
						}
					}
				})
			},

			onPaywayItem2(param) {
				this.paywayList2.forEach((item) => {
					item.status = false;
					if (item.id == param.id) {
						item.status = true;
						this.paywayId2 = item.id;
					}
				})
			},
			bourseInput(combox) {
				// console.log(combox, this.bourse);
			},
			getParams() {
				this.$post({
					module: 'Exchange',
					interface: 5000,
					data: {
						type: this.type == 1 ? 3 : this.type == 2 ? 2 : "",
					},
				}).then(res => {
					if (!res.length) {
						uni.showToast({
							title: "请绑定交易所",
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/serviceCenter/boundExchange'
							})
						}, 1000)

						return
					}
					this.price = res[0].children[0].price;
					this.candidates = res;
					this.candidates.forEach((item, index) => {
						if (index == 0) {
							item.status = true;
						} else {
							item.status = false;
						}
					})
					this.bourse = {
						value: res[0].value,
						label: res[0].label
					}
					this.candidates2 = res[0].children;
					this.candidates2.forEach((item, index) => {
						if (index == 0) {
							item.status = true;
						} else {
							item.status = false;
						}
					})
					this.bourse2 = {
						value: res[0].children[0].value,
						label: res[0].children[0].label,
						price: res[0].children[0].price,
						exNo: res[0].children[0].exNo,
						num: res[0].children[0].num,
						chiNum: res[0].children[0].chiNum,
						limitNum: res[0].children[0].limitNum,
					}
				})


			},
			onCandidates(param) {
				this.candidates.forEach((item, index) => {
					item.status = false;
					if (param.value == item.value) {
						item.status = true;
						this.bourse = {
							value: item.value ? item.value : "",
							label: item.label ? item.label : "",
						}
						this.candidates2 = item.children;
						this.candidates2.forEach((item2, index2) => {
							if (index2 == 0) {
								item2.status = true;
							} else {
								item2.status = false;
							}
						})
						this.bourse2 = {
							value: item.children.length ? item.children[0].value : "",
							label: item.children.length ? item.children[0].label : "",
							price: item.children.length ? item.children[0].price : "",
							exNo: item.children.length ? item.children[0].exNo : "",
							num: item.children.length ? item.children[0].num : "",
							chiNum: item.children.length ? item.children[0].chiNum : "",
							limitNum: item.children.length ? item.children[0].limitNum : "",
						}
						this.dropDownShow = false;
					}
				})
			},
			onCandidates2(param) {
				this.candidates2.forEach((item) => {
					item.status = false;
					if (item.value == param.value) {
						item.status = true;
						this.bourse2 = {
							value: item.value ? item.value : "",
							label: item.label ? item.label : "",
							price: item.price ? item.price : 0,
							exNo: item.exNo ? item.exNo : "",
							num: item.num ? item.num : "",
							chiNum: item.chiNum ? item.chiNum : "",
							limitNum: item.limitNum ? item.limitNum : "",
						}
						this.dropDownShow2 = false;
					}
				})


			},
			getInfo() {
				this.$post({
					module: 'User',
					interface: 1000,

				}).then(res => {
					this.info = res; //credit_2 原始仓单贡献值  credit_11  持有仓单普通积分可用
					if (this.type == 1) {
						this.credit = res.credit_2;
					} else {
						this.credit = res.credit_11_ke;
					}
				})
			},

			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		padding: 0 32rpx;

		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.right {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}
		}

		.top {
			.topL {
				width: 100%;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;

				.topLText {
					color: #333;
					font-size: 28rpx;
				}

				.topLDropDown {
					position: absolute;
					left: 0;
					top: 86rpx;
					z-index: 10;
				}
			}

			.topC {
				width: 100%;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				margin-top: 30rpx;

				.topLText {
					color: #333;
					font-size: 28rpx;
				}

				.topCDropDown {
					position: absolute;
					left: 0;
					top: 86rpx;
					z-index: 10;
				}
			}


		}

		.topR {
			margin-top: 20rpx;

			.topRItem {
				flex: 1;
				color: #333;
				font-size: 28rpx;
			}
		}

		.exchange {
			margin-top: 28rpx;
			width: 100%;

			.exchangeTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.exchangeIpt {
				width: 70%;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
				padding-left: 32rpx;
			}
		}

		.exch {
			margin-top: 20rpx;

			.exchItem {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				line-height: 40rpx;
			}
		}

		.payway {
			margin-top: 48rpx;
			padding: 32rpx;
			border-radius: 16rpx;
			background-color: #f8f8f8;

			.paywayTitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}

			.paywayList {
				padding-top: 8rpx;

				.paywayItem {
					margin: 20rpx 0;

					.paywayItemL {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
					}

					.paywayItemR {
						.choose {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.paywayItem:nth-last-of-type(1) {
					margin-bottom: 0;
				}
			}
		}

		.btn {
			width: 606rpx;
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 50rpx;
			border: none;
			padding: 0;
			margin: 80rpx auto 0;
		}

		.paywayBox {
			width: 100%;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;
			padding-top: 44rpx;
			position: relative;
			padding-bottom: 41rpx;

			.close {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 18rpx;
				right: 20rpx;
				z-index: 1;
			}

			.paywayTitle2 {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
				text-align: center;
			}

			.way2 {
				margin-top: 40rpx;

				.wayItem2 {
					padding: 0 39rpx 0 40rpx;
					height: 110rpx;
					border-top: 2rpx solid #F5F5F5;

					.wayItemLeft2 {

						.wayItemLeftCon2 {
							margin-left: 20rpx;

							.wayItemLeftConText2 {
								font-size: 30rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}

							.wayItemLeftConCard2 {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 42rpx;
							}
						}
					}

					.wayItemRight2 {
						.choose2 {
							width: 40rpx;
							height: 40rpx;
						}

						.add2 {
							.addText2 {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 37rpx;
							}

							.arrowRight2 {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}

				.wayItem2:nth-last-of-type(1) {
					border-bottom: 2rpx solid #F5F5F5;
				}

			}

			.paySure2 {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
				width: 610rpx;
				height: 88rpx;
				background: #F2615F;
				border-radius: 16rpx;
				margin: 40rpx auto 0;
				padding: 0;
				border: none;
			}
		}
	}
</style>